<style>
  :root{
    --cr-ink:#1F2E2B;        /* headings & body text */
    --cr-muted:#5B6B68;      /* secondary text */
    --cr-primary:#437F77;    /* brand green */
    --cr-primary-deep:#35665F;
    --cr-accent:#F5DBC2;     /* CTA colour */
    --cr-accent-deep:#EDC9A6;
    --cr-paper:#FFFFFF;
    --cr-tint:#EEF4F3;       /* light green band */
    --cr-card:#E6EFEF;       /* featured card (lighter #D8E6E6) */
    --cr-cta:#E7A86B;        /* featured-card button */
    --cr-cta-light:#F3CFAB;
    --cr-rule:#D5E1DF;
  }
  .cr-page *{box-sizing:border-box;margin:0;padding:0}
  .cr-page{
    font-family:"Figtree",-apple-system,"Segoe UI",Roboto,sans-serif;
    color:var(--cr-ink);background:var(--cr-paper);
    line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased;
  }
  .cr-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  .cr-page a{color:var(--cr-primary)}
  .cr-page a:focus-visible,.cr-btn:focus-visible{outline:3px solid var(--cr-primary);outline-offset:3px}

  /* ---------- buttons ---------- */
  .cr-btn{
    display:inline-block;font-weight:700;font-size:17px;line-height:1;
    padding:16px 28px;border:2px solid transparent;border-radius:999px;text-decoration:none;
    transition:background .15s,border-color .15s,transform .15s;
  }
  .cr-btn:active{transform:translateY(1px)}
  .cr-btn-accent{background:var(--cr-accent);color:var(--cr-primary-deep)}
  .cr-btn-accent:hover{background:var(--cr-accent-deep)}
  .cr-btn-cta{background:var(--cr-cta);color:var(--cr-primary-deep)}
  .cr-btn-cta:hover{background:var(--cr-cta-light);border-color:var(--cr-cta)}
  .cr-btn-outline{border-color:var(--cr-primary);color:var(--cr-primary);background:transparent}
  .cr-btn-outline:hover{background:var(--cr-primary);color:#fff}
  .cr-btn-fine{display:block;margin-top:12px;font-size:14px;color:var(--cr-muted)}

  /* ---------- header ---------- */
  .cr-header{background:var(--cr-primary);padding:18px 0}
  .cr-header .cr-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .cr-header img{height:44px;width:auto;display:block}
  .cr-header a.cr-login{color:#fff;font-weight:600;font-size:15px;text-decoration:none;opacity:.9}
  .cr-header a.cr-login:hover{opacity:1;text-decoration:underline}

  /* ---------- hero ---------- */
  .cr-hero{background:linear-gradient(180deg,var(--cr-primary) 0,var(--cr-primary-deep) 100%);color:#fff;padding:56px 0 64px}
  .cr-hero .cr-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  .cr-hero h1{font-size:clamp(34px,4.6vw,52px);line-height:1.08;font-weight:800;letter-spacing:-.015em;max-width:15ch}
  .cr-hero p.cr-lede{margin-top:20px;font-size:20px;max-width:34ch;color:rgba(255,255,255,.88)}
  .cr-hero .cr-cta{margin-top:32px}
  .cr-hero .cr-btn-fine{color:rgba(255,255,255,.8)}
  .cr-hero figure{display:flex;justify-content:center}
  .cr-hero img{max-width:100%;width:380px;height:auto;border-radius:10px;box-shadow:0 24px 48px rgba(0,0,0,.35);transform:rotate(-3deg)}

  /* ---------- pricing paths ---------- */
  .cr-paths{padding:72px 0}
  .cr-paths h2{text-align:center;font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-.01em}
  .cr-paths p.cr-sub{text-align:center;color:var(--cr-muted);margin-top:8px}
  .cr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
  .cr-card{border:2px solid var(--cr-rule);border-radius:16px;padding:36px 32px;display:flex;flex-direction:column}
  .cr-card.cr-featured{border-color:var(--cr-primary);background:var(--cr-card);position:relative}
  .cr-card.cr-featured::before{
    content:"Scanned the sticker in your book? Start here.";
    position:absolute;top:-14px;left:28px;background:var(--cr-primary);color:#fff;
    font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;
  }
  .cr-card h3{font-size:24px;font-weight:800;margin-bottom:6px}
  .cr-card p.cr-who{color:var(--cr-muted);margin-bottom:22px}
  .cr-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .cr-price strong{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1}
  .cr-price span{color:var(--cr-muted);font-size:16px}
  .cr-price-alt{margin-top:6px;color:var(--cr-muted);font-size:15px}
  .cr-card ul{list-style:none;margin:26px 0 30px;display:grid;gap:12px}
  .cr-card li{padding-left:30px;position:relative}
  .cr-card li::before{
    content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;
    background:var(--cr-primary);
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="black"/><path d="M7 12.5l3 3 7-7" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
            mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="black"/><path d="M7 12.5l3 3 7-7" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
  }
  .cr-card .cr-btn{margin-top:auto;text-align:center}
  .cr-trial-note{margin-top:28px;text-align:center;color:var(--cr-muted);font-size:15px;max-width:60ch;margin-left:auto;margin-right:auto}

  /* ---------- why ---------- */
  .cr-why{background:var(--cr-tint);padding:72px 0}
  .cr-why .cr-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
  .cr-why h2{font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-.01em;max-width:16ch}
  .cr-why img{width:100%;height:auto;display:block}
  .cr-facts{margin-top:28px;display:grid;gap:22px}
  .cr-facts>div{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
  .cr-facts>div>div{display:block}
  .cr-facts b{
    display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;
    background:var(--cr-primary);color:#fff;font-size:18px;font-weight:800;letter-spacing:-.02em;
  }
  .cr-facts h3{font-size:18px;font-weight:700;margin-bottom:2px}
  .cr-facts p{color:var(--cr-muted);font-size:16px}

  /* ---------- quote ---------- */
  .cr-quote{padding:72px 0;text-align:center}
  .cr-quote blockquote{font-size:clamp(22px,2.8vw,30px);font-weight:600;line-height:1.3;max-width:26ch;margin:0 auto;letter-spacing:-.01em}
  .cr-quote blockquote::before{content:"“";color:var(--cr-primary);font-size:1.6em;line-height:0;vertical-align:-.25em;margin-right:4px}
  .cr-quote cite{display:block;margin-top:18px;font-style:normal;color:var(--cr-muted);font-size:16px}

  /* ---------- final CTA ---------- */
  .cr-final{background:var(--cr-primary);color:#fff;padding:64px 0;text-align:center}
  .cr-final h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.015em}
  .cr-final p{margin-top:10px;color:rgba(255,255,255,.85);font-size:18px}
  .cr-final .cr-cta{margin-top:28px}
  .cr-final .cr-btn-fine{color:rgba(255,255,255,.8)}

  /* ---------- footer ---------- */
  .cr-footer{padding:28px 0;font-size:14px;color:var(--cr-muted)}
  .cr-footer .cr-wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

  /* ---------- responsive ---------- */
  @media (max-width:860px){
    .cr-hero .cr-wrap,.cr-grid2,.cr-why .cr-wrap{grid-template-columns:1fr}
    .cr-hero{padding:40px 0 48px}
    .cr-hero figure{order:-1}
    .cr-hero img{width:240px;transform:none}
    .cr-hero h1,.cr-why h2{max-width:none}
    .cr-why img{max-width:420px;margin:0 auto}
    .cr-card.cr-featured::before{left:20px}
    .cr-btn{width:100%;text-align:center}
  }
  @media (prefers-reduced-motion:reduce){.cr-btn{transition:none}}
</style>